<template>
  <div class="column-direction">
    <friend-select
      ref="friendSelect"
      v-model="selectedFriends"
      :friends="friends"
      :disabledSelected="groupMemberIds"
    />
    <form-button
      :loading="selectLoading"
      @submit="handleSubmit"
      @cancel="handleCancel"
    />
  </div>
</template>

<script>
import _ from 'lodash'
import { mapGetters } from 'vuex'
export default {
  name: 'AddGroupMemberForm',
  props: {
    groupMember: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      selectedFriends: [],
      friendLoading: true,
      selectLoading: false
    }
  },
  computed: {
    ...mapGetters({
      friends: 'friendsUnflod'
    }),
    groupMemberIds () {
      return _.map(this.groupMember, 'groupMemberId')
    }
  },
  methods: {
    reset () {
      this.$refs.friendSelect.reset()
    },
    // 取消
    handleCancel () {
      this.$emit('cancel')
    },
    // 提交
    handleSubmit () {
      console.log(this.selectedFriends)
      // this.$emit('submit', this.selectedFriends)
    }
  }
}
</script>

<style scoped lang="scss">
$bg-color: #ffffff;
$button-color: #2953ff;
$border-color: #f1f1f1;
$font-color: #414141;
$click-color: #d5d4d4;
$hover-color: #e8e7e7;
$height: 450px;
.row-direction {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.column-direction {
  display: flex;
  flex-direction: column;
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
.friend-all {
  display: flex;
  flex: 1;
  border-right: 1px solid $border-color;
  overflow-y: scroll;
  height: $height;
  .el-checkbox-group {
    width: 90%;
    .el-collapse {
      border: #ffffff;
    }
    ::v-deep .el-collapse-item__header {
      width: 100%;
      font-size: 14px;
    }
  }
}
.friend-group {
  .friend {
    display: flex;
    align-items: center;
    justify-items: center;
    font-size: 14px;
    height: 60px;
    cursor: pointer;
    padding: 0 30px;
    &:last-child {
      border-bottom: 0;
    }
    &:hover {
      background-color: $hover-color;
    }
    ::v-deep label {
      display: flex;
      align-items: center;
    }
    .avatar {
      width: 40px;
      height: 40px;
      margin: 0 30px;
    }
    .name {
      width: 150px;
      margin: 0 10px;
      color: $font-color;
      font-weight: 400;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
    }
    ::v-deep .el-checkbox__label {
      width: 90%;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  .select {
    background-color: $bg-color;
    &:hover {
      background-color: $bg-color;
    }
  }
}
.friend-Checked {
  display: flex;
  flex: 1;
  overflow-y: scroll;
  height: $height;
  .delete-icon {
    font-size: 25px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  .button {
    background-color: #2953ff;
    color: #ffffff;
  }
}
</style>
